import React, { Component } from 'react'
import { Carousel,Flex,Grid,WingBlank} from 'antd-mobile';
// import axios from 'axios';
import { API } from '../../utils/api';
import {  BASE_URL } from '../../utils/url'
//导入导航菜单
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'

import '../Index/index.scss'
import {getCurrentCity} from '../../utils/index'
//导入搜索导航栏组件
import SearchHeader  from '../../components/SearchHeader'
const navs = [
    {
      id: 1,
      img: Nav1,
      title: '整租',
      path: '/home/list'
    },
    {
      id: 2,
      img: Nav2,
      title: '合租',
      path: '/home/list'
    },
    {
      id: 3,
      img: Nav3,
      title: '地图找房',
      path: '/map'
    },
    {
      id: 4,
      img: Nav4,
      title: '去出租',
      path: '/rent'
    }
  ]

//   const data = Array.from(new Array(4)).map((_val, i) => ({
//     icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
//     text: `name${i}`,
//   }));

  //获取地理位置信息
//   navigator.geolocation.getCurrentPosition(position =>{
//       console.log('当前位置信息',position);
//   })
  
export default class Index extends Component {
    state = {
        //轮播图状态数据
        swipers: [1,2,3],
        isSwiperLoaded: false,

        //租房小组数据
        groups: [],
        news: [],
        curCityName: '上海',
      }

      //获取轮播图数据方法
      async getSwipers(){
        const res = await API.get('/home/swiper')
        this.setState({
            swipers: res.data.body,
            isSwiperLoaded: true
        })
      }

      //获取租房小组数据
      async getGroups(){
            const res = await API.get('/home/groups',{
                params:{
                    area: 'AREA%7C88cff55c-aaa4-e2e0'
                }
            })
            this.setState({
                groups: res.data.body
            })
      }
      //获取资讯数据
      async getNews(){
          const res = await API.get('/home/news',{
            params: {
                area: 'AREA%7C88cff55c-aaa4-e2e0'
            }
        })
        this.setState({
            news: res.data.body
        })
        console.log(res);
      }

      //渲染轮播图结构
      renderSwipers(){
          return this.state.swipers.map(item => (
            <a
              key={item.id}
              href="http://www.bilibili.com"
              style={{ display: 'inline-block', width: '100%', height: 212 }}
            >
              <img
                src={BASE_URL + item.imgSrc}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
              />
            </a>
          ))
      }

      // 渲染导航菜单
  renderNavs() {
    return navs.map(item => (
      <Flex.Item key={item.id}
        onClick={() => this.props.history.push(item.path)}
      >
        <img src={item.img} alt="" />
        <h2>{item.title}</h2>
      </Flex.Item>
    ))
  }

  // 渲染最新资讯
  renderNews() {
    return this.state.news.map(item => (
      <div className="news-item" key={item.id}>
        <div className="imgwrap">
          <img
            className="img"
            src={ BASE_URL + item.imgSrc}
            alt=""
          />
        </div>
        <Flex className="content" direction="column" justify="between">
          <h3 className="title">{item.title}</h3>
          <Flex className="info" justify="between">
            <span>{item.from}</span>
            <span>{item.date}</span>
          </Flex>
        </Flex>
      </div>
    ))
  }
      async componentDidMount() {
       this.getSwipers()
       this.getGroups()
       this.getNews()

       //通过IP定位获取到当前城市名称
      //  const curCity = new window.BMapGL.LocalCity();
      //  curCity.get(async res =>{
      //      console.log('当前城市信息',res);
      //      const result =await axios.get(`http://localhost:8080/area/info?name=${res.name}`)
      //      console.log(result);
      //      this.setState({
      //       curCityName: result.data.body.label
      //      })
      //  })
        
      const curCity =await getCurrentCity()
      this.setState({
        curCityName: curCity.label
      })
      }

     
      render() {
        return (
          <div className='index'>
              <div className='swiper'>
                {this.state.isSwiperLoaded ? (<Carousel autoplay={true} infinite={true}>
                {this.renderSwipers()}
                </Carousel>) : ( '' )
                }

                    {/* 搜索框 */}
                   <SearchHeader cityName={this.state.curCityName} />
              </div>
              
            

            {/* 导航菜单 */}
            <Flex className='nav'>
                {this.renderNavs()}
            </Flex>

            {/* 租房小组 */}
            <div className='group'>
                <h3 className='group-title'>
                    租房小组<span className='more'>更多</span>
                </h3>
                {/* 宫格组件 */}
                    <Grid
                        data={this.state.groups}
                        columnNum={2}
                        square={false}
                        hasLine={false}
                        renderItem={item => (
                            <Flex className="group-item" justify="around" key={item.id}>
                                <div className="desc">
                                    <p className="title">{item.title}</p>
                                    <span className="info">{item.desc}</span>
                                </div>
                                <img src={ BASE_URL + item.imgSrc} alt="" />
                            </Flex>
                        )}
                    />

                    {/* 最新资讯 */}
                    <div className="news">
                        <h3 className="group-title">最新资讯</h3>
                        <WingBlank size="md">{this.renderNews()}</WingBlank>
                    </div>
            </div>
            
          </div>
        );
      }
}
